<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: gray;
        }
        div {
            top: 25%;
            left: 25%;
            position: absolute;
            border-radius: 100%;
            transition: 0.25s ease-in-out;
        }
        .outer {
            width: 25vw;
            height: 25vw;
            background-color: #7c7b7b;
            border-radius: 100%;
            box-shadow: 0 -1px 0 #333;
            border-bottom: 1px solid silver;
        }
        .outer:hover {
            margin-top: 0.3%;
            background-color: #444;
            box-shadow: 0 -5px 0 #333;
            border-bottom: 1px solid silver;
        }
        .middle {
            width: 12.5vw;
            height: 12.5vw;
            background-color: gray;
            border-radius: 100%;
            box-shadow: 0 1px 0 #333;
            border-top: 1px solid oldlace;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(31%, hotpink), color-stop(100%, white));
            background: -webkit-linear-gradient(top, hotpink 31%, white 100%);
            background: -moz-linear-gradient(top, hotpink 31%, white 100%);
            background: -o-linear-gradient(top, hotpink 31%, white 100%);
            background: -ms-linear-gradient(top, hotpink 31%, white 100%);
            background: linear-gradient(to bottom, gray 31%, silver 100%);
            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='hotpink', endColorstr='#d3f6fe', GradientType=0);
        }
        .outer:hover .middle {
            margin-top: -1.5%;
            box-shadow: 0 4px 0 #333;
            border-top: 1px solid silver;
        }
        .inner {
            width: 6.5vw;
            height: 6.5vw;
            background-color: pink;
            border-radius: 100%;
            box-shadow: 0 1px 0 #333;
        }
        .inner {
            margin-top: -3%;
            position: relative;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(31%, hotpink), color-stop(100%, white));
            background: -webkit-linear-gradient(top, hotpink 31%, white 100%);
            background: -moz-linear-gradient(top, hotpink 31%, white 100%);
            background: -o-linear-gradient(top, hotpink 31%, white 100%);
            background: -ms-linear-gradient(top, hotpink 31%, white 100%);
            background: linear-gradient(to bottom, hotpink 31%, white 100%);
            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='hotpink', endColorstr='#d3f6fe', GradientType=0);
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            border-bottom: 1px solid #333;
            color: #000;
            font-size: 0.75em;
            text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
            -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
            box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .2);
            position: relative;
        }
        .inner:before {
            content: "";
            width: 70%;
            height: 50%;
            display: block;
            position: absolute;
            left: 14%;
            top: 2%;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            background: -moz-linear-gradient(top, #fff 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(8%, rgba(255, 255, 255, 0.7)), color-stop(100%, rgba(255, 255, 255, 0)));
            background: -webkit-linear-gradient(top, #fff 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
            background: -o-linear-gradient(top, #fff 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
            background: -ms-linear-gradient(top, #fff 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
            background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="middle">
        <div class="inner"></div>
    </div>
</div>
</body>
</html>